<template>
  <div class="app titleBoxClean" :style="addclase">
    <div class="item lBox title" style="font-size:25px;">
      <template v-if="msg.f=='l'">
        <div class="text" :style="addtextclse">{{msg.t}}</div>
        <div
          class="boder"
          style="border-bottom: 3px red solid;"
          v-bind:style="{ width: msg.w+'em'}"
        ></div>
      </template>
    </div>
    <div class="item cBox" style="font-size:25px;">
      <!-- <template> -->
      <template v-if="msg.f=='c'">
        <div
          class="boder"
          style="border-bottom: 3px red solid;"
          v-bind:style="{ width: msg.w+'em'}"
        ></div>
        <div class="text">{{msg.t}}</div>
      </template>
    </div>
    <div class="item rBox">
      <div class="text" :style="addtextclse">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      // msg: {
      //   f: "l",
      //   w: 0
      // }
      addclase: {
        // 'background-color': 'null'
      },
      addtextclse: {}
    };
  },
  created: function() {
    if (this.ISnull(this.msg.color)) {
      this.addclase["background-color"] = this.msg.color;
      this.addclase["color"] = "#fff";
      this.msg.w = "0";
      // this.addtextclse["height"] = "50px";
      // this.addtextclse["line-height"] = "50px";
      this.addtextclse["padding-right"] = "1em";
      this.addtextclse["text-align"] = "right";
    }
    if (!this.ISnull(this.msg.w)) {
      this.msg.w = "0";
    }
  },
  props: ["msg"],
  methods: {},
  components: {}
};
</script>

<style lang="scss" type="text/css" scoped>
@import "@/common/style.scss";
$main-color: rgb(0, 162, 255) !default;

.titleBoxClean {
  width: 100%;
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: space-between;
  .item {
    height: 50px;
    width: 200px;
    cursor: context-menu;
  }
  .lBox,
  .cBox {
    font-weight: 500;
  }
  .lBox {
    text-align: left;
    .boder {
      height: 1px;
    }
    .text {
      width: 6em;
      height: 50px;
      line-height: 50px;
    }
  }
  .rBox {
    text-align: right;
    .text {
      height: 50px;
      line-height: 50px;
      text-align: right;
    }
  }
  .cBox {
    .boder {
      height: 1px;
      margin: 0 auto;
      margin-top: 16px;
    }
    .text {
      width: 6em;
      text-align: center;
      height: 30px;
      line-height: 30px;
      margin: 0 auto;
    }
  }
  // .title {
  //   width: 100px;
  //   margin: 0 auto;
  // }
}
</style>

